<template>
    <div>

        <el-form :inline="true" :model="search">
            <el-form-item label="姓名:">
                <el-input prefix-icon="el-icon-search" v-model="search.menuName" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="loadData">查询</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="2" :offset="0">
                <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
            </el-col>
        </el-row>


        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" border>
            
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>

            <el-table-column prop="account" label="账号">
            </el-table-column>

            <el-table-column prop="phone" label="手机">
            </el-table-column>

            <el-table-column prop="email" label="邮箱">
            </el-table-column>

            <el-table-column prop="department" label="部门">
            </el-table-column>

            <el-table-column prop="job" label="职位">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <tableEditDelete :scope="scope" @editHandle="editHandle" @deleteHandle="deleteHandle"></tableEditDelete>

                </template>
            </el-table-column>
        </el-table>


        <el-dialog :title="isEdit?'编辑用户':'新增用户'" :visible.sync="dialogVisible" width="40%"  @closed="dialogClosed">
            <el-form ref="form" :model="form" label-width="90px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名" size="normal" clearable></el-input>
                </el-form-item>

                <el-form-item label="账号"  prop="account">
                    <el-input v-model="form.account" placeholder="请输入账号" size="normal" clearable></el-input>
                </el-form-item>

                <el-form-item label="手机" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号" size="normal" clearable></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱" size="normal" clearable></el-input>
                </el-form-item>

                <el-form-item label="部门" prop="departmentId">
                    <el-cascader clearable v-model="form.departmentId" :options="selectData.department" class="select100"
                        :props="{ checkStrictly: true, value: 'id', label: 'name',emitPath:false }"></el-cascader>
                </el-form-item>

                <el-form-item label="职位" prop="JobId">
                    <el-cascader clearable v-model="form.jobId" :options="selectData.job" class="select100" 
                            :props="{ checkStrictly: true, value: 'id', label: 'name',emitPath:false }"></el-cascader>
                </el-form-item>

                <el-form-item label="身份证号码" prop="idNum">
                    <el-input v-model="form.idNum" placeholder="请输入账号" size="normal" clearable></el-input>
                </el-form-item>         


                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getSelect as getDepartmentSelect } from "@/api/user/department"
import { getSelect as getJobSelect } from "@/api/user/job"
import { insert,getPageList,deleteUser,update } from "@/api/user/user";
import tableEditDelete from "@/components/tableEditDelete.vue";
import { deepClone } from "@/utils/deepClone";

export default {
    components:{tableEditDelete},
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            search: {
                name: '',
                pageNum:1,
                pageSize:10
            },
            menuOptions:[],
            loading: true,
            totalCount:0,
            isEdit:false,
            form: {
                id:'',
                name:'',
                account:'',
                passwird:'',
                phone:'',
                email:'',
                roles:[],
                departmentId:'',
                JobId:'',
                idNum:''

            },
            selectData:{
                department:[],
                job:[]
            }
        }
    },
    created() {
        this.loadDepartmentSelect()
        this.loadJobSelect()

        this.loadData()
    },
    methods: {
        async loadData(){
            let res = await getPageList(this.search)
            if(res.code == 10000){
                this.tableData = res.data.data
                this.totalCount = res.data.count
            }else{
                this.$message({
                    type:'error',
                    message:res.msg
                })
            }
                
        },
        async loadDepartmentSelect(){
            let res = await getDepartmentSelect()
            if(res.code == 10000)
                this.selectData.department = this.getChildrenSelect(res.data)
        },
        async loadJobSelect(){
            let res = await getJobSelect()
            if(res.code == 10000)
                this.selectData.job = this.getChildrenSelect(res.data)
        },
        async onSubmit(){
            let res
            let data = deepClone(this.form)
            data.department = null
            data.job = null
            if(this.isEdit)
                res = await update(data)
            else 
                res = await insert(data)
            if(res.code == 10000){
                this.$message({
                    type:'success',
                    message:'保存成功'
                })
                this.loadData()
            }
            this.dialogVisible = false
        },
        async editHandle(row){
            this.isEdit = true
            this.form = deepClone(row)
            this.dialogVisible = true
        },
        async deleteHandle(row){
            let res = await deleteUser(row.id)
            if(res.code == 10000){
                this.loadData()
                this.$message({
                    type:'success',
                    message:'操作成功'
                })
            }
        },
        dialogClosed(){
            this.isEdit = false
            this.$refs.form.resetFields()
        },
        getChildrenSelect(list) {
            var result = {}
            this.createArr(result,list,"");   
            return result.children;
        },
        createArr(data, arr, id) {
            const filtersList = arr.filter(e => e.parentCode==id);
            data.children = filtersList;
            data.children = data.children.map(e => {
                e = this.createArr(e, arr, e.id);
                if (e.children.length > 0) {
                    return e;
                } else {
                    delete e.children
                    return e
                }
            });
            return data;
        }
    }
};
</script>

<style scoped>

</style>